<template>
  <div class="table-data">
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="form"
      label-width="180px"
      size="small"
      class="form-box"
    >
      <p class="title">基础信息设置</p>
      
      <el-form-item label="渠道名称" prop="name">
        <el-input type="text" v-model="form.name" placeholder="请输入渠道名称"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="link_name">
        <el-input type="text" v-model="form.link_name" placeholder="请输入联系人名称"></el-input>
      </el-form-item>
      <el-form-item label="二级域名前缀" prop="domain">
        <el-input type="text" v-model="form.domain"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input maxlength="11" v-model="form.phone" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="商户状态">
        <el-switch v-model="state"></el-switch>
      </el-form-item>
      <el-form-item label="渠道商分类" prop="type">
        <el-select v-model="form.type" clearable placeholder="请选择商户类型">
          <el-option label="api对接方" value="api"></el-option>
          <el-option label="渠道商" value="channel"></el-option>
          <el-option label="平台" value="platform"></el-option>
          <el-option label="企业" value="business"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="可售卖产品标签">
        <el-select v-model="form.tag_ids" multiple placeholder="请选择">
          <el-option
            v-for="item in labelList"
            :key="item.id"
            :label="item.tag"
            :value="item.id">
          </el-option>
        </el-select>
        <span class="price-txt" style="margin-left:10px">共 {{labelList.length}} 件商品</span>
      </el-form-item>
      <p class="title">结算信息设置</p>
      <el-form-item label="结算方式" prop="settle_type">
        <el-radio-group v-model="form.settle_type">
          <el-radio :label="1">储值</el-radio>
          <el-radio :label="2">平台代收款</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="结算周期" prop="settle_cycle">
        <el-radio-group v-model="settle_cycle">
          <el-row>
            <el-col :span="24" style="margin-bottom:18px">
              <el-radio :label="2">
                <span style="color:#606266">商品核销后 </span>
                <el-input style="width:60px !important" type="text" v-model="form.settle_cycle.code"></el-input>
                <span style="color:#606266"> 天  商品发货后 </span>
                <el-input style="width:60px !important" type="text" v-model="form.settle_cycle.ship"></el-input>
                <span style="color:#606266"> 天</span>
              </el-radio>
            </el-col>
            <!-- <el-col :span="24">
              <el-radio :label="1">（暂时不做）每月</el-radio>
              <el-input type="text" v-model="form.content"></el-input>
              <span>号结算</span>
            </el-col> -->
          </el-row>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="结算费率" prop="rate">
        <el-input type="text" v-model="form.rate"></el-input>
        默认为0.07， 取值区间为0.01-1之间 == 1%到100%
      </el-form-item>
      <el-form-item label="所在账户所属省市城市" prop="account_province">
        <el-input type="text" v-model="form.account_province"></el-input>
      </el-form-item>
      <el-form-item label="结算银行名称" prop="bank_name">
       <el-input type="text" v-model="form.bank_name"></el-input>
      </el-form-item>
      <el-form-item label="银行卡开户行地址" prop="account_opening">
        <el-input type="text" v-model="form.account_opening"></el-input>
      </el-form-item>
      <el-form-item label="银行卡卡号" prop="bank_number">
        <el-input type="text" v-model="form.bank_number"></el-input>
      </el-form-item>
      <el-form-item label="持卡人姓名" prop="cardholder_name">
        <el-input type="text" v-model="form.cardholder_name"></el-input>
      </el-form-item>
      <p class="title">回调设置</p>
      <el-form-item label="核销通知地址" >
        <el-input type="text" v-model="form.config.notify_url"></el-input>
      </el-form-item>
    
      <!-- <el-form-item label="商家结算费率" prop="application">
        <el-input type="text" v-model="form.versions"></el-input>
      </el-form-item> -->
      <p class="title">登录信息设置</p>
      <el-form-item label="登录账号" prop="username">
        <el-input type="text" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input type="text" v-model="form.password"></el-input>
      </el-form-item>
     
    </el-form>
    <div class="dialog-footer">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import uploadImg from "@/components/uploadImg/index.vue";
import Region from "@/components/region/index.vue";
import channelApi from "@/api/channel";
import systemApi from "@/api/system";
import goodsApi from "@/api/goods";
import isMobileNumber from "@/api/formValidation.js";
@Component({
  components: {uploadImg,Region}
})
export default class channelAddDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  check:boolean = true//防重复提交
  @Provide() state: boolean = true;
  @Provide() address: any=[];
  @Provide() labelList: any=[];
  @Provide() settle_cycle: any=2
  @Provide() systemGropuList:any=[]//权限组列表
  @Provide() form:any={
    id:"",
    name:"",
    link_name:"",
    logo: "",
    type: "",
    province:"",
    city:"",
    district:"",
    detail:"",
    phone:"",
    domain:"",
    status:"",
    amount:"",
    tag_ids:"",
    username:"",
    password:"",
    rate: "",
    config:{notify_url:""},
    settle_type:"",
    settle_cycle:{code:"",ship:""},
    account_province:"",
    bank_name:"",
    bank_number:"",
    account_opening:"",
    cardholder_name:"",
  };
  @Provide() rules: any = {
    type: [{ required: true, message: "请选择商户类型", trigger: "change" }],
    name: [{ required: true, message: "请输入渠道名称", trigger: "blur" }],
    link_name: [{ required: true, message: "请输入联系人名称", trigger: "blur" }],
    detail: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
    phone: [{ required: true, message: "请输入联系电话", trigger: "blur" },{ validator: isMobileNumber, trigger: "blur" }],
    domain: [{ required: true, message: "请输入二级域名前缀", trigger: "blur" }],
    tag_ids: [{ required: true, message: "请选择商品标签", trigger: "change" }],
    settle_type: [{ required: true, message: "请选择结算方式", trigger: "change" }],
    cardholder_name: [{ required: true, message: "请输入持卡人姓名", trigger: "blur" }],
    account_province: [{ required: true, message: "请输入所在账户所属省市城市", trigger: "blur" }],
    bank_name: [{ required: true, message: "请输入结算银行名称", trigger: "blur" }],
    bank_number: [{ required: true, message: "请输入银行卡卡号", trigger: "blur" }],
    account_opening: [{ required: true, message: "请输入开户行地址", trigger: "blur" }],
    username: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    rate: [{ required: true, message: "请输入结算费率", trigger: "blur" }],
  };
  //省事级联组件传递过来的值
  propAddress(address:any){
    this.form.province = address[0];
    this.form.city = address[1];
    this.form.district = address[2];
  }
  // 上传图片子组件传递过来的图片路径
  propImg(imgPath: any){
    this.form.logo = imgPath;
  }
  // 取消
  cancel(){
    this.$router.push({
      path:'/channelList'
    })
  }
  // 新建渠道
  handleAdd(){
    let a={id:'' ,code:'',weight:this.form.advertisers.length+1}
    this.form.advertisers.push(a)
  }
  // 提交
  submitFormAdd(formName: any) {
    (this.$refs[formName] as any).validate((valid: boolean) => {
      if (valid) {
        if(this.state==true){
          this.form.status=1
        }else{
          this.form.status=0
        }
        if(this.check) {
          let _this = this
          _this.check = false
          channelApi.saveChannel(_this.form)
          .then((res: any) => {
            if(res.data.status){
              _this.$message({
                message: '操作成功',
                type: "success"
              });
              _this.$router.push({
                path:'/channelList'
              })
              _this.$emit("loadData")
              setTimeout(function() {
                _this.check = true
              },3000)
            }else{
              _this.$message({
                message: res.data.msg,
                type: "error"
              });
               _this.check = true
            }
          });
        }
         
      }
    });
  }
  created() {
   systemApi.systemGropuList()
      .then((res: any) => {
        this.systemGropuList=res.data.data.list
    });
    goodsApi.labelList(1,9999999)
      .then((res: any) => {
        this.labelList = res.data.data.data;
    });
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer{
  padding-left: 150px
}
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
  .title{
    line-height: 60px;
    font-weight: bold;
    font-size: 16px;
  }
}
.avatar-uploader{
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
